﻿<div class="demo-description mw-1100">
    <h2><DemoNavLink Link="BindGridtoData#DataAsync" />Asynchronous Data Binding</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.DataAsync">DataAsync</a> property to bind our Blazor <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1">Data Grid</a> to a strongly typed collection that is loaded asynchronously (for instance, from an HTTP request). This property allows you to prevent excessive re-rendering and draw the grid's UI skeleton before data is loaded. The property specifies an asynchronous function that returns a <a class="helplink" target="_blank" href="https://docs.microsoft.com/en-us/dotnet/api/system.threading.tasks.task-1">Task&lt;IEnumerable&lt;T&gt;&gt;</a> object and accepts a <a class="helplink" target="_blank" href="https://docs.microsoft.com/en-us/dotnet/api/system.threading.cancellationtoken">CancellationToken</a> object as a parameter.
    </p>

    <p>
        GitHub Example: <a class="helplink" target="_blank" href="https://github.com/DevExpress-Examples/blazor-bind-data-grid-to-data-asynchronously">How to bind the Data Grid to a strongly typed collection loaded asynchronously</a>
    </p>
</div>
<DxDataGrid DataAsync="@SupplierService.GetSuppliersAsync"
            PageSize="5"
            CssClass="mw-1100">
    <DxDataGridColumn Field="@nameof(Supplier.SupplierName)" />
    <DxDataGridComboBoxColumn Field="@nameof(Supplier.SupplierCategoryID)" Caption="Category" DataAsync="@SupplierService.GetSupplierCategoriesAsync"
                              ValueFieldName="@nameof(SupplierCategory.SupplierCategoryID)" TextFieldName="@nameof(SupplierCategory.SupplierCategoryName)" />
    <DxDataGridComboBoxColumn Field="@nameof(Supplier.DeliveryMethodID)" Caption="Delivery Method" DataAsync="@SupplierService.GetDeliveryMethodsAsync"
                              ValueFieldName="@nameof(DeliveryMethod.DeliveryMethodID)" TextFieldName="@nameof(DeliveryMethod.DeliveryMethodName)" />
    <DxDataGridColumn Field="@nameof(Supplier.PhoneNumber)" />
    <DxDataGridColumn Field="@nameof(Supplier.BankAccountBranch)" />
    <DxDataGridColumn Field="@nameof(Supplier.BankAccountNumber)" />
</DxDataGrid>
<CodeSnippet_Grid_DataBinding_AsyncSupport />

@code {
    [Inject] protected SupplierService SupplierService { get; set; }
}
